<template>
		<view class="question">
		  <view class="title color33">
        <!-- <jyf-parser v-if="topicObj.parentId" :html="topicObj.topicTitle.replace(/<p.*?>/,`<p>${topicObj.num}.`)" ref="article" ></jyf-parser> -->
        <jyf-parser :html="topicObj.topicTitle" ref="article"></jyf-parser>
		  </view>
      <block v-if="topicType.radio===topicObj.topicTypeId">
        <radios-group :optionList="topicObj.optionGroup[1]" :value="topicObj.optionData.length>0?topicObj.optionData[0].option:''" @radioUiChange="radioUiChange"></radios-group>
      </block>
      <block v-if="topicType.checked===topicObj.topicTypeId">
        <check-group :optionList="topicObj.optionGroup[1]" :value="topicObj.optionData.length>0?topicObj.optionData[0].option:''" @checkboxChange="checkboxChange"></check-group>
      </block>
      <block v-if="topicType.fill===topicObj.topicTypeId">
        <text class="blue margin-lr">作答:</text>
       <view class="option u-f-ac filloption" v-for="(item,index) in topicObj.topicTitle.match(/(___[0-9]___)/g)" :key="index">
         <view class="check">({{(index+1)}})</view>
         <input  class="option-text fontsize28" :class="{'input-border':FocusTopic===topicObj.id}" type="text" placeholder="请输入你的答案" placeholder-class="placeholder_class" @blur="saveTextAnswer" :data-sort="index+1" :value="fillData(topicObj.optionData,index+1)" confirm-type="done"  @confirm="$hideKeyboard()" />
       		
       </view>
      </block>
      <block v-if="topicType.simple===topicObj.topicTypeId">
        <view class="topic margin-lr paddingTopbom30" v-for="(item,index) in topicObj.examPaperTopicDTOS" :key="index+item.sort">
          <!-- <jyf-parser :html="item.topicTitle.replace(/<p.*?>/,`<p>${index + 1}.`)" ref="article"></jyf-parser> -->
          <jyf-parser :html="item.topicTitle" ref="article"></jyf-parser>
        
        　<!-- <view class="litter-topic">（1）投其葬日，驰往赴之 </view>　
        　<view class="litter-topic">（2）省书见瘗，怆然感之 </view> -->
        </view>
        <text class="blue margin-lr">作答:</text>
        <view class="picbox u-f-ac margin-lr paddingTopbom30" v-if="topicObj.examPaperTopicDTOS" v-for="(item,index) in topicObj.examPaperTopicDTOS" :key="index+'a'+item.id" >
          <text>{{index+1}}.</text>
          <view class="u-f-ac">
            <block v-for="(item,i) in simpleData(topicObj.optionData,index+1)" :key="i">
              <view class="img-box u-f-ajc margin-lr positionRe" v-if="item">
                 <image v-if="item" :src="$ossHost+item" @click="previewImage($ossHost+item)" class="u-f-ajc margin-lr"></image>
                <span class="iconfont icon-cha-quan-01 del fontsize24" @click="delImg(index+1,item)"></span>
              </view>
               
            </block>
            <view class="tupian u-f-ajc u-f-fdc margin-lr" @click="chooseImage(index+1)" v-if="simpleData(topicObj.optionData,index+1).length<6">
              <span class="iconfont icon-xiangji"></span>
              <text class="fontsize24 placeholder_class">答案请拍照上传</text>
            </view>
            
          </view>
        </view>
        <view class="picbox u-f-ac margin-lr paddingTopbom30" v-show="!topicObj.examPaperTopicDTOS">
          <!-- <text>1.</text> -->
          <view class="u-f-ac">
            <block v-for="(item,index) in simpleData(topicObj.optionData,topicObj.num)" :key="index">
            <view class="img-box u-f-ajc margin-lr positionRe" v-if="item">
               <image :src="$ossHost+item" @click="previewImage($ossHost+item)" v-if="item" class="u-f-ajc margin-lr"></image>
              <span class="iconfont icon-cha-quan-01 del fontsize24" @click="delImg(topicObj.num,item)"></span>
            </view>
            </block>
           
             
            <view class="tupian u-f-ajc u-f-fdc margin-lr" @click="chooseImage(topicObj.num)" v-if="simpleData(topicObj.optionData,topicObj.num).length<6">
              <span class="iconfont icon-xiangji"></span>
              <text class="fontsize24 placeholder_class">答案请拍照上传</text>
            </view>
          </view>
        </view>
      </block>
		  <block v-if="topicType.cloze===topicObj.topicTypeId">
		    <view class="option u-f-ac" v-for="(item,i) in topicObj.optionGroup" :key="i">
		      <view class="check color64">({{i}})</view>
		      <transverseRadio class="option-text flex1 u-f-jsb" :optionList="item"  answer="" right="" :value="clozeData(topicObj.optionData,i)" @selectChange="radiosChange(i,$event)"></transverseRadio>
		      
		    </view>
		  </block>
      <block v-if="topicType.sort===topicObj.topicTypeId">
        <view class="option u-f-ac filloption" v-for="(item,index) in topicObj.optionGroup[1]" :key="index">
           <view class="check">{{item.optionId}}</view>
           <view class="option-text">{{item.optionText}}</view>
         </view>
         <view class="blue margin-lr paddingTopbom30">作答:</view>
        <input class="input-topic fontsize28" :class="{'input-border':FocusTopic===topicObj.id}" type="text" placeholder="请输入你的答案" placeholder-class="placeholder_class" @blur="saveTextAnswer" :data-sort="topicObj.num" :value="fillData(topicObj.optionData,topicObj.num)" :maxlength="topicObj.optionGroup[1].length"  @confirm="$hideKeyboard()"/>
        <view class="tips paddingTopbom30 margin-lr">提示：答案连续输入，如ABCDEF</view>
      </block>
      <block v-if="[topicType.multipleTopic,topicType.mixTopic].includes(topicObj.topicTypeId) ">
        <block v-for="(item,index) in topicObj.examPaperTopicDTOS" :key="index">
          <uiTopic :ref="'uiTopic'+index" :topicObj="item"></uiTopic>
        </block>
        
      </block>
		</view>
		
</template>

<script>
  import {topicType} from '@/utils/model.js'
  import checkGroup from '@/components/check-group.vue'
  import radiosGroup from '@/components/radio-group.vue'
  import transverseRadio from '@/components/transverse-radio'
	export default {
    name:'uiTopic',
    components: {
      'check-group': checkGroup,
      'radios-group': radiosGroup,
      transverseRadio
    },
   props:{
      topicObj:Object,
      optionData:{
        type:Array,
        default:function(){
          return []
        }
      }
    },
    watch:{
      topicObj:function(val){
        // topicObj.examPaperTopicDTOS=val
        // console.log('watch',val)
      }
    },
		data() {
			return {
				topicType,
        FocusTopic:'',
        finishValue:'',
        ImageCount:5,
        examPaperTopicDTOS:{}
			};
		},
    methods:{
      // 渲染简答题答案
      simpleData(data,index){    
        let arr=data.filter(item=>item.sort===index)
       return arr.length>0?arr[0].text.split('|'):[]
      },
      // 渲染完形填空答案
      clozeData(data,index){
        let arr=data.filter(item=>item.sort===index)
       return arr.length>0?arr[0].option:""
      },
      // 渲染填空题答案
      fillData(data,index){
        // console.log(index)
        let arrs=data.filter(item=>item.sort===index)
       return arrs.length>0?arrs[0].text:""
      },
      //保存单选做题
      radioUiChange(e){
        uni.$emit('saveOptionData',{option:e,sort:this.topicObj.num,topicTypeId:this.topicObj.topicTypeId})
        console.log(e)
      },
      // 保存多选答案
      checkboxChange(e){
        uni.$emit('saveOptionData',{option:e,sort:this.topicObj.num,topicTypeId:this.topicObj.topicTypeId})
        console.log('多选',e)
      },
      //保存文本答案
      saveTextAnswer(e){
        this.FocusTopic=e.id
        uni.$emit('saveOptionData',{text:e.detail.value,sort:parseInt(e.target.dataset.sort) ,topicTypeId:this.topicObj.topicTypeId})
        console.log('填空题',{text:e.detail.value,sort:parseInt(e.target.dataset.sort) })
      },
      // 保存完形填空答案
      radiosChange(index,e){
        uni.$emit('saveOptionData',{option:e,sort:index,topicTypeId:this.topicObj.topicTypeId })
        console.log('wanxing',e)
      },
      //删除图片
      delImg(index,text){
         uni.$emit('saveOptionData',{text:"|"+text,sort:index,topicTypeId:this.topicObj.topicTypeId,delImg:true})
      },
      // 预览图片
      previewImage(imgurl){
        uni.previewImage({
            urls: [encodeURI(imgurl)],
            longPressActions: false
        });
      },
      // 保存图片答案
      chooseImage(index){
        uni.chooseImage({
          count: this.ImageCount,
          sizeType: ['camera', 'original'],
          // b拍照选择
          sourceType: ['camera'],
          success: (chooseImageRes) => {
            if (chooseImageRes.errMsg === "chooseImage:ok") {
              //显示消息提示框
              uni.showLoading({
                mask: true
              })
              console.log(chooseImageRes.tempFilePaths[0])
              //上传图片
              //图片路径可自行修改
              this.$http.upload("/common/upload",{filePath:chooseImageRes.tempFilePaths[0],name: 'file',header:{'content-type':'application/x-www-form-urlencoded'}}).then(res=>{
                   // console.log(res)
                   uni.$emit('saveOptionData',{text:"|"+res.data,sort:index,topicTypeId:this.topicObj.topicTypeId })
                    this.ImageCount--;
                     uni.hideLoading();
                 }).catch(err=>{
                    uni.hideLoading();
                   this.$showToast('上传失败')
                   console.log(err)
                 })
                 
              // this.$utils.uploadFile(chooseImageRes.tempFilePaths[0]).then(res=>{
              //   uni.$emit('saveOptionData',{text:"|"+res,sort:index,topicTypeId:this.topicObj.topicTypeId })
              //    uni.hideLoading();
              //    this.ImageCount--;
              // })
      
            }
          }
        })
      }
    }
	}
</script>

<style lang="scss" scoped>
.question {
      .option {
        @include option;
      }
      .title {
        padding: px2vh(20) px2vw(16);
        word-break:break-all; //强制换行
      }
    }
    // 简答题
    .topic{
      .litter-topic{
        text-indent: 1em;
        margin: px2vh(30) 0px;
      }
    }
    .picbox{
      .tupian{
        width: px2vw(208);
        height: px2vw(130);
background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
        border: 1px dashed #CCCCCC;
        border-radius: 8px;
      }
      .icon-xiangji{
        font-size: px2vw(56);
        color:#CCCCCC;
      }
      image{
        width: px2vw(208);
        height: px2vw(130);
      }
    }
    .input-topic{
      width: 100%;
      text-align: start;
      text-indent: 1em;
    }
    .tips{
      color: #F55555;
      font-size: px2vw(20);
    }
    .blue {
      color: $global-color;
    }
    // 填空题
    .filloption{
      .check{
        color: #000000 !important;
      }
      .option-text{
      border: none;
      border-radius: 0px;
      border-left: 1px solid #cccccc;
      text-align: start;
      
      }
      uni-input{
        flex: 1;
        height: px2vh(40);
        line-height: px2vh(40);
      }
      
    }
    .input-border{
      border: 1px solid #3D9FEA;
    }
    .img-box{
      .del{
        position: absolute;
        right: px2vw(8);
        top: px2vw(-8);
      }
    }
</style>
